<template>
  <div class="storeInfo">
    <top-header :isLeft="true" title="更多门店列表"></top-header>
    <ul>
      <li v-for="(item, i) in store" :key="i">
        <section class="name">{{ item.storeName }}</section>
        <section>
          <span class="status">营业中 </span>
          <span
            >{{ item.serviceTime.businessOpenTime.substr(0, 5) }}-{{
              item.serviceTime.businessCloseTime.substr(0, 5)
            }}</span
          >
        </section>
        <section>
          <i class="iconfont icon-dingwei_huaban1"></i>
          <span>{{ item.distLenStr }} </span>
          <span>{{ item.storeAddress }}</span>
        </section>
      </li>
    </ul>
  </div>
</template>

<script>
import TopHeader from "../components/TopHeader.vue";
export default {
  data() {
    return {
      store: [],
    };
  },
  components: {
    TopHeader,
  },
  mounted() {
    this.store = this.$route.query.store;
  },
};
</script>
<style lang="scss" scoped>
.storeInfo {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  ul {
    padding: $common-padding;
    li {
      border-radius: $common-border-radius;
      height: 7rem;
      background: $module-color;
      margin-bottom: $common-margin;
      padding: $common-padding;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      section {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .name {
        font-size: 1.2rem;
        font-weight: bolder;
        color: $font-color;
      }
      .status {
        color: $starbucks-color;
      }
    }
  }
}
</style>